<template>
  <div class="shop">
      <div class="top-list" v-for="(item,index) in shop" :key="index">
      <div >
        <div class="p-img">
          <img :src="item.img" alt="">
        </div>
        <div class="p-pcroll">
          <span>￥</span>
          {{item.money}}
        </div>
        <div class="p-name">
            <span>
              {{item.name}}
            </span>
        </div>
        <div class="p-commit">
          <span>{{item.pj}}</span>
          条评论
        </div>
        <div class="p-shop">
          <div>{{item.dp}}</div>
        </div>
        <div class="p-jinche">
            <div @click='jinche(index)'>加入购物车>>>></div>
        </div>    
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'JingDongShangPin',
    props:["shop"],
    methods:{
    jinche(index){
        const info_test = this.shop[index]
        this.$emit("addChe",info_test)
        console.log(info_test)
    }
    }
}
</script>

<style>
.shop{
    width: 1200px;
    margin: 50px auto;
    display:flex;
    justify-content: space-around;
}
.top-list{
width: 220px;
padding:12px 9px;
background:#fff;
border:1px solid #fff;
}
.p-img{
  height:220px;
  padding:0;
  margin-bottom:5px;
  overflow: hidden;
}
.p-img img{
  width: 220px;
  height: 220px;
}
.p-pcroll{
  margin-bottom:0 0 8px;
  overflow:hidden;
  height:22px;
  width:100%;
  line-height:22px;
  color:#e4393c;
  font-size: 20px;
  font-weight: 400;
}
.p-pcroll span{
  font-size:13px;
}
.p-name{
  height:40px;
  line-height:20px;
  margin-bottom:8px;
  overflow:hidden;
  font-size: 12px;
  color:#666;
}
.p-commit{
  width: 100%;
  height: 18px;
  margin-top:-3px;
  margin-bottom:9px;
  overflow:hidden;
  font-size: 12px;
}
.p-commit span{
    color: #646fb0;
    font-weight: 700;
}
.p-shop{
  line-height:18px;
  height: 18px;
  overflow: hidden;
  margin-top:-3;
  margin-bottom:9px;
  
}
.p-shop div{
  font-size: 12px;
  color:#999;
  width:108px;
  overflow:hidden;
}
.p-jinche{
    border-radius: 5px;
    background-color: red;
    padding: 5px 40px 5px;
    color: white;
}
</style>